<template>
  <div class="relative min-h-screen w-full bg-gray-200">
    <nav class="text-base z-50 sticky top-0 bg-white border-gray-200">
      <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
        <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
          <span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>
        </a>
        <button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="navbar-dropdown" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
          </svg>
        </button>
      </div>
    </nav>
      <div class="flex items-center justify-center">
        <div class="container mx-auto mt-20 mb-40" >
          <div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10">
            <h2 class="text-3xl font-bold mb-6 text-center text-gray-900">邮箱登录</h2>
            <form class="max-w-lg mx-auto w-auto">
              <div class="mb-5">
                <label for="email" class="flex items-center space-x-4 text-sm font-medium text-gray-900">
                  <svg class="w-5 h-5 text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 18">
                    <path d="M7 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm2 1H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
                  </svg>
                  邮箱
                </label>
                <input type="email" id="email" v-model="data.userNum" class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"  required>
              </div>
              <div class="mb-5">
                <label for="password" class="flex items-center space-x-4  mb-2 text-sm font-medium text-gray-900">
                  <svg class="w-5 h-5 text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
                    <path d="M14 7h-1.5V4.5a4.5 4.5 0 1 0-9 0V7H2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Zm-5 8a1 1 0 1 1-2 0v-3a1 1 0 1 1 2 0v3Zm1.5-8h-5V4.5a2.5 2.5 0 1 1 5 0V7Z"/>
                  </svg>
                  验证码
                </label>
                <input type="password" v-model="data.password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
              </div>
              <div class="flex items-start mb-5">
                <a href="" class="ml-auto text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center">获取邮箱验证码</a>
              </div>
              <div class="flex flex-col ">
                <a @click="loginUser" class="text-white bg-sky-500 hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-32 sm:w-auto mt-2 mb-3 mx-8 px-10 py-2.5 text-center">登录</a>
                <div class="flex space-x-2 ml-24">
                  <a href="/login" class="text-blue-500  font-medium rounded-lg text-sm sm:w-auto text-center">账号密码登录 |</a>
                  <a href="/register" class="text-blue-500  font-medium rounded-lg text-sm sm:w-auto text-center">立即注册</a>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    <Icp class="fixed bottom-0"/>
  </div>
</template>
<script setup>
import axios from 'axios';
import getCurrentTimestamp from '../public/methods.js';
import Icp from "@/components/MainPage/Icp.vue";

const data = {
  userNum: '',
  password: ''
}

function loginUser(){
  axios({
    url: "api/user/login",
    method: "post",
    data: {
      "userNum": data.userNum,
      "password": data.password
    },
    headers: {
      'content-type': 'application/json;charset=utf-8',
      'Timestamp':getCurrentTimestamp()
    },
  }).then((res) => {
    if (res.data.code === 200) {
      //登录成功，跳转页面+消息提示+存储登录用户的数据
    } else {
      //登录失败，消息提示
    }

  });
}

</script>